<template>
  <div>
    <el-dialog :visible.sync="visible"
               title="考核统计"
               width="55%"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-input v-model="queryData.hospitalName" @clear="handleClearName" class="w-200" placeholder="请输入分店关键字"
                clearable>

      </el-input>
      <el-button type="primary"
                 @click="handleOption('select')">查询
      </el-button>
      <el-button type="primary"
                 @click="handleOption('export')">导出
      </el-button>
      <element-table class="mt-20"
                     :columns="columns"
                     :data="tableData"
                     v-loading="loading"
                     pager
                     :pageTotal="pageTotal"
                     :pageIndex="pageIndex"
                     :pageSize="pageSize"
                     @handleChangePage="handleChangePage">

      </element-table>
    </el-dialog>
  </div>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";

export default {
  name: "consumableList",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryData: {
        hospitalName: ''
      },
      loading: false,
      pageTotal: 0,
      pageSize: 20,
      pageIndex: 1,
      columns: [
        {
          label: '分店名称',
          prop: 'hospitalName',
          align: "center",
          width: 200
        }, {
          label: '项目名称',
          prop: 'deviceName',
          align: "center"
        }, {
          label: '所需数量',
          prop: 'count',
          align: "center",
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  components: {
    'element-table': ElementTable
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    //列表查询
    getList() {
      this.loading = true
      this.post(this.api.slowDisease.getDeviceReportDetail, {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
        deviceId: this.dataObj.deviceId,
        ...this.queryData
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    handleOption(op, row) {
      switch (op) {
        case 'select':
          this.pageIndex = 1
          this.getList()
          break;
        case 'export':
          this.commonFunction.exportFileData({
            deviceId: this.dataObj.deviceId,
            ...this.queryData
          }, this.api.slowDisease.deviceReportDetailExport, '耗材详情报表', '.xlsx')
          break;
      }
    },
    handleClearName() {
      this.pageIndex = 1
      this.getList()
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  }
}
</script>

<style scoped>

</style>
